<template>
	<div>
		<div v-if="show" class="top-text"
			:style="{display: 'flex', 'justify-content': 'center', 'align-items': 'center',top: `${systemBarHeight}px`}">
			<view @click="topAction('fun')" style="width: 50px; text-align: center; display: flex; justify-content: center; align-items: center;">
				<image src="https://wx.2024csnl.com/static/home/list.png"
					mode="heightFix" style="height: 25px;" />
			</view>
			<view style="flex:1;" class="flex align">
				<view style="flex:1; text-align: center;" @click="topAction('business')" class="noactive">
					<text style="color: white; font-size: 16px; text-align: center;">商圈</text>
				</view>
				<view style="flex:1; text-align: center;" @click="topAction('cityVideo')">
					<text style="color: white; font-size: 16px; text-align: center;" :class="{ active: currentTab == 'cityVideo', noactive:  currentTab != 'cityVideo' }">{{city}}</text>
				</view>
				<view style="flex:1; text-align: center;" @click="topAction('scan')" class="noactive">
					<text style="color: white; font-size: 16px; text-align: center;">扫一扫</text>
				</view>
				<view style="flex:1; text-align: center;" @click="topAction('tip')" class="noactive">
					<text style="color: white; font-size: 16px; text-align: center;">厂家</text>
				</view>
				<view style="flex:1; text-align: center;" @click="topAction('video')" :class="{ active: currentTab == 'video', noactive:  currentTab != 'video' }">
					<text style="color: white; font-size: 16px; text-align: center;" >推荐</text>
				</view>
			</view>
			<view style="width: 50px;  text-align: center; display: flex; justify-content: center; align-items: center;"
				@click="topAction('tip')">
				<image src="https://wx.2024csnl.com/static/home/search.png" mode="heightFix" style="height: 25px;" />
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			city: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				currentTab: 'video',
				systemBarHeight: getApp().globalData.systemBarHeight,
			}
		},
		methods: {
			setCurrentTab(action){
				this.currentTab = action;
			},
			topAction(action) {
				this.currentTab = action;
				this.$emit('topAction', action)
			}
		}
	}
</script>

<style scoped>
	.iconfont {
		font-family: iconfont;
	}

	.top-text {
		display: flex;
		flex-direction: row;
		position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		z-index: 10001;
		height: 50px;
		justify-content: center;
	}

	.box {
		width: 120rpx;
		height: 90rpx;
		position: relative;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.active {
		border-bottom: 3px solid #fff;
	}
	
	.noactive {
		border-bottom: 3px solid transparent;
	}

	.box-line {
		width: 3rpx;
		height: 90rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.text-box {
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
	}

	.text {
		color: #FFFFFF;
		font-size: 36rpx;
		height: 50rpx;
	}

	.text-active {
		font-weight: 600;
		color: #FFFFFF;
		font-size: 36rpx;
		height: 50rpx;
	}

	.text-border {
		width: 50rpx;
		height: 8rpx;
	}

	.text-border-active {
		height: 8rpx;
		width: 50rpx;
		background-color: #FFFFFF;
	}

	.right-text {
		position: fixed;
		top: 50px;
		right: 20px;
		z-index: 10002;
		height: 90rpx;
		flex-direction: row;
		align-items: center;
	}

	.left-text {
		position: fixed;
		top: 50px;
		left: 20px;
		z-index: 10002;
		height: 90rpx;
		flex-direction: row;
		align-items: center;
	}

	.left-text-style {
		color: #FAFBFF;
		font-size: 30rpx;
	}

	.num-box {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #FF1B00;
		color: #FFFFFF;
		border-radius: 30rpx;
		width: 30rpx;
		height: 30rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.num {
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.iconfont-size {
		color: #FFFFFF;
		font-size: 50rpx;
		text-align: center;
		font-weight: 600;
	}
</style>